<template>
  <div class="data-board">
    <div class="dataset-left">
      <!-- 上半部分 -->
      <div class="dataset-part">
        <!-- 左侧数量显示 -->
        <div class="left-box">
          <div class="dataset-num-part fw-700">
            <div class="item mb-20">
              <div class="title">数据集数量</div>
              <div class="num-box">
                <div class="num blue">{{ bucketObj.bucketNum ? bucketObj.bucketNum : 0 }}</div>
              </div>
            </div>
            <div class="item">
              <div class="title fw-700">文件数量</div>
              <div class="num-box">
                <div class="num or">{{ bucketObj.fileNum ? bucketObj.fileNum : 0 }}</div>
              </div>
            </div>
          </div>
          <div class="dataset-detail-part">
            <!-- top词云 -->
            <div class="top-box">
              <div class="dataset-size mr-20">
                <div class="title">数据集大小TOP10</div>
                <a-empty v-if="!bucketObj?.bucketTopList?.length" :image="simpleImage" description="暂无数据集" />
                <!-- <div v-else id="dataSetCloud" ref="dataSetCloudRef" class="content"></div> -->
                <div v-else class="data-set-content">
                  <div v-for="(item, index) in bucketObj.bucketTopList" :key="index" class="item">
                    <span class="index">{{ index + 1 }}</span>
                    <a-tooltip placement="topLeft">
                      <template #title>
                        <span class="name">{{ item.name }}</span>
                      </template>
                      {{ item.name }}
                    </a-tooltip>
                  </div>
                </div>
              </div>
              <div class="file-size">
                <div class="title">文件大小TOP10</div>
                <a-empty v-if="!bucketObj?.fileTopList?.length" :image="simpleImage" description="暂无文件" />
                <div v-else class="file-size-content">
                  <div v-for="(item, index) in bucketObj.fileTopList" :key="index" class="item">
                    <span class="index">{{ index + 1 }}</span>
                    <a-tooltip placement="topLeft">
                      <template #title>
                        <span class="name">{{ item.name }}</span>
                      </template>
                      {{ item.name }}
                    </a-tooltip>
                  </div>
                </div>

                <!-- <div v-else id="fileSizeCloud" class="content"></div> -->
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 文件数量趋势 -->
      <div class="file-trend-part">
        <div class="file-trend-title fw-700">文件数量趋势</div>
        <div id="fileTrendCloud" class="file-trend-chart"></div>
      </div>
    </div>
    <!-- <div class="dataset-right"> -->
    <div class="piechart-box h-223">
      <div class="file-item">
        <div class="title">格式分布</div>
        <div id="formatPie" class="file-pie"></div>
      </div>
      <div class="file-item">
        <div class="title">类型分布</div>
        <div id="typePie" class="file-pie"></div>
      </div>
      <div class="file-item">
        <div class="title">大小分布</div>
        <div id="sizePie" class="file-pie"></div>
      </div>
    </div>
    <!-- </div> -->
  </div>
</template>

<script setup lang="ts">
  import 'echarts-wordcloud'

  import { Empty } from 'ant-design-vue'
  import dayjs from 'dayjs'
  import * as echarts from 'echarts'
  import { onMounted, onUnmounted, onUpdated, ref } from 'vue'

  import { customerMyDateSetApi } from '@/services/api'
  const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE

  // 整体数据
  const bucketObj = ref<any>({})

  // 格式分布
  let formatPieDom
  let formatPieChart: any
  // const default =[{ value:100, itemStyle: { color:"#ccc"} }]
  const formatPieInit = (): void => {
    // This example requires ECharts v5.5.0 or later
    const option = {
      tooltip: {
        trigger: 'item'
      },

      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['50%', '90%'],
          center: ['50%', '50%'],
          label: {
            show: false
          },
          // adjust the start and end angle
          tooltip: {
            borderWidth: 0,
            padding: [8, 12, 8, 12],
            fontSize: 12,
            formatter: function (params: any) {
              if (params.name === 'default') {
                return
              }

              params.marker =
                '<div style="display:inline-block; width:10px; height:10px; border-radius:50%; background-color:' +
                params.color +
                '; margin-right:4px;"></div>'
              let tooltipContent = params.marker
              tooltipContent += '<div style="display:inline-block;color: rgba(17, 22, 31, 0.75);margin-right:4px">' + params.name + '</div>' // 修改 name 的样式
              tooltipContent += '<div style="display:inline-block;color: rgba(21, 23, 27, 0.95);"> ' + params.value + '</div>' // 修改 value 的样式

              tooltipContent += '</div>' // 结束自定义样式
              return tooltipContent
            },
            extraCssText: 'box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);'
          },
          data: bucketObj.value.statisticInfoVO?.formatInfoList
            ? bucketObj.value.statisticInfoVO.formatInfoList
            : [{ name: 'default', value: 100, itemStyle: { color: 'rgba(17, 103, 240, 0.05)' } }],
          color: [
            'rgba(255, 240, 139, 1)',
            'rgba(136, 226, 213, 1)',
            'rgba(252, 181, 140, 1)',
            'rgba(237, 132, 118, 1)',
            'rgba(248, 185, 84, 1)',
            'rgba(217, 228, 136, 1)',
            'rgba(232, 240, 253, 1)',
            'rgba(146, 219, 155, 1)',
            'rgba(190, 169, 226, 1)',
            'rgba(84, 189, 250, 1)'
          ]
        }
      ]
    }

    option && formatPieChart?.setOption(option)
    window.addEventListener('resize', () => {
      formatPieChart.resize()
    })
  }

  // 类型分布
  let typePieDom
  let typePieChart: any
  const typePieInit = (): void => {
    // This example requires ECharts v5.5.0 or later
    const option = {
      tooltip: {
        trigger: 'item'
      },

      series: [
        {
          name: 'Access From',
          label: {
            show: false
          },
          type: 'pie',
          radius: ['50%', '90%'],

          center: ['50%', '50%'],
          // adjust the start and end angle
          tooltip: {
            borderWidth: 0,
            padding: [8, 12, 8, 12],
            fontSize: 12,
            formatter: function (params: any) {
              if (params.name === 'default') {
                return
              }

              params.marker =
                '<div style="display:inline-block; width:10px; height:10px; border-radius:50%; background-color:' +
                params.color +
                '; margin-right:4px;"></div>' // var tooltipContent = params.marker+params.data.name+' '+params.data.value // params.forEach(function (item) { // console.log(item) // result += item.axisValue + "</br>" + item.marker + item.data // })
              let tooltipContent = params.marker
              tooltipContent += '<div style="display:inline-block;color: rgba(17, 22, 31, 0.75);margin-right:4px">' + params.name + '</div>' // 修改 name 的样式
              tooltipContent += '<div style="display:inline-block;color: rgba(21, 23, 27, 0.95);"> ' + params.value + '</div>' // 修改 value 的样式

              tooltipContent += '</div>' // 结束自定义样式
              return tooltipContent
            },
            extraCssText: 'box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);'
          },
          data: bucketObj.value.statisticInfoVO?.typeInfoList
            ? bucketObj.value.statisticInfoVO.typeInfoList
            : [{ name: 'default', value: 100, itemStyle: { color: 'rgba(17, 103, 240, 0.05)' } }],

          color: [
            'rgba(255, 240, 139, 1)',
            'rgba(136, 226, 213, 1)',
            'rgba(252, 181, 140, 1)',
            'rgba(237, 132, 118, 1)',
            'rgba(248, 185, 84, 1)',
            'rgba(217, 228, 136, 1)',
            'rgba(232, 240, 253, 1)',
            'rgba(146, 219, 155, 1)',
            'rgba(190, 169, 226, 1)',
            'rgba(84, 189, 250, 1)'
          ]
        }
      ]
    }

    option && typePieChart?.setOption(option)
    window.addEventListener('resize', () => {
      typePieChart.resize()
    })
  }

  // 大小分布
  let sizePieDom
  let sizePieChart: any
  const sizePieInit = (): void => {
    // This example requires ECharts v5.5.0 or later
    const option = {
      tooltip: {
        trigger: 'item'
      },

      series: [
        {
          label: {
            show: false
          },
          name: 'Access From',
          type: 'pie',
          radius: ['50%', '90%'],

          center: ['50%', '50%'],
          // adjust the start and end angle
          tooltip: {
            borderWidth: 0,
            padding: [8, 12, 8, 12],
            fontSize: 12,
            formatter: function (params: any) {
              if (params.name === 'default') {
                return
              }

              params.marker =
                '<div style="display:inline-block; width:10px; height:10px; border-radius:50%; background-color:' +
                params.color +
                '; margin-right:4px;"></div>' // var tooltipContent = params.marker+params.data.name+' '+params.data.value // params.forEach(function (item) { // console.log(item) // result += item.axisValue + "</br>" + item.marker + item.data // })
              let tooltipContent = params.marker
              tooltipContent += '<div style="display:inline-block;color: rgba(17, 22, 31, 0.75);margin-right:4px">' + params.name + '</div>' // 修改 name 的样式
              tooltipContent += '<div style="display:inline-block;color: rgba(21, 23, 27, 0.95);"> ' + params.value + '</div>' // 修改 value 的样式

              tooltipContent += '</div>' // 结束自定义样式
              return tooltipContent
            },
            extraCssText: 'box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);'
          },
          data: bucketObj.value.statisticInfoVO?.sizeRangeInfoList
            ? bucketObj.value.statisticInfoVO.sizeRangeInfoList
            : [{ name: 'default', value: 100, itemStyle: { color: 'rgba(17, 103, 240, 0.05)' } }],

          color: [
            'rgba(255, 240, 139, 1)',
            'rgba(136, 226, 213, 1)',
            'rgba(252, 181, 140, 1)',
            'rgba(237, 132, 118, 1)',
            'rgba(248, 185, 84, 1)',
            'rgba(217, 228, 136, 1)',
            'rgba(232, 240, 253, 1)',
            'rgba(146, 219, 155, 1)',
            'rgba(190, 169, 226, 1)',
            'rgba(84, 189, 250, 1)'
          ]
        }
      ]
    }

    option && sizePieChart?.setOption(option)
    window.addEventListener('resize', () => {
      sizePieChart.resize()
    })
  }

  // 文件数量趋势
  let fileTrendCloudDom
  let fileTrendCloudChart: any
  const fileTrendCloudInit = (): void => {
    const option = {
      tooltip: {
        trigger: 'axis', // 设置 tooltip 的触发方式为 axis
        // 使用 formatter 自定义 tooltip 的内容
        formatter: function (params: any) {
          let tooltipContent = '' // 用于存储自定义的 tooltip 内容
          tooltipContent += '<div style="text-align: left;width:185px">' // 自定义样式，可以根据需要修改

          // 循环遍历每个数据项，显示每个数据点的信息
          for (let i = 0; i < params.length; i++) {
            let seriesName = params[i].axisValue // 获取系列名称
            let value = params[i].value // 获取数据点的值

            tooltipContent += '<div style="font-size:12px;color: rgba(17, 22, 31, 0.75);margin-bottom:8px">' + seriesName + '</div>' // 显示系列名称

            // 判断当前数据点是否是被鼠标指的那条线上的数据点，如果是，则添加特殊的圆点标识
            if (params[i].seriesIndex === params[0].seriesIndex && params[i].dataIndex === params[0].dataIndex) {
              tooltipContent +=
                '<div style="margin-right: 5px; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: rgba(100, 154, 240, 1);"></div>' // 显示特殊的圆点标识
            } else {
              tooltipContent += '<div style="margin-right: 5px; display: inline-block;">●</div>' // 显示普通的圆点
            }

            tooltipContent +=
              '<div style="display:inline-block;font-size:12px">文件数量: ' +
              '<span style="font-size: 12px; color: rgba(21, 23, 27, 0.95); font-weight: 600">' +
              value +
              '</span>' +
              '</div>' // 显示数据点的值
          }

          tooltipContent += '</div>' // 结束自定义样式

          return tooltipContent // 返回自定义的 tooltip 内容
        },
        padding: [8, 12, 8, 12],
        extraCssText: 'box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);'
      },
      grid: {
        bottom: '34px',
        left: '5%',
        width: '92%',
        height: '111px'
      },
      xAxis: {
        boundaryGap: false,
        type: 'category',
        data: bucketObj.value.bucketFileNumTrendVO?.fileNumTrendVOList
          ? bucketObj.value.bucketFileNumTrendVO.fileNumTrendVOList.map((item: { name: string; value: number }) => item.name)
          : defaulte.map((item: { name: string; value: number }) => item.name),
        axisLine: {
          show: false
        },
        axisLabel: {
          color: 'rgba(17, 22, 31, 0.52)',
          marginLeft: 20
        },
        axisTick: {
          // alignWithLabel: true, // 将刻度线与文字对齐
          length: 4, // 刻度线的长度
          lineStyle: {
            color: 'rgba(217, 218, 219, 1)'
          }
        }
      },
      yAxis: {
        type: 'value',
        // splitNumber: 3,
        max: function (value: any) {
          return value.max
        },
        min: function (value: any) {
          return value.min
        },
        // interval: 250,
        axisTick: {
          show: false
        },
        axisLabel: {
          color: 'rgba(17, 22, 31, 0.52)'
        },
        splitLine: {
          show: false
        }
      },
      series: [
        {
          data: bucketObj.value.bucketFileNumTrendVO?.fileNumTrendVOList
            ? bucketObj.value.bucketFileNumTrendVO.fileNumTrendVOList.map((item: { name: string; value: number }) => item.value)
            : defaulte.map((item: { name: string; value: number }) => item.value),
          type: 'line',
          lineStyle: {
            color: 'rgba(100, 154, 240, 1)',
            width: 2
          },
          legendHoverLink: false,
          symbol: 'circle', // 将符号设置为圆点
          symbolSize: 8, // 设置圆点大小
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(100, 154, 240, 0.40)'
              },
              {
                offset: 1,
                color: 'rgba(100, 154, 240, 0.10)'
              }
            ])
          },
          itemStyle: {
            normal: {
              opacity: 0 // 设置透明度为0，即隐藏圆点
            },
            // 设置被鼠标指的那条折线的样式
            emphasis: {
              borderColor: '#fff', // 指示圆点边框颜色
              opacity: 1,
              borderWidth: 2, // 指示圆点边框宽度
              color: 'rgba(100, 154, 240, 1)' // 指示圆点填充颜色
            }
          }
        }
      ]
    }

    option && fileTrendCloudChart?.setOption(option)
  }
  // 获取接口数据
  const getBoardInfo = async (): Promise<void> => {
    const { data } = await customerMyDateSetApi.getBoard()
    bucketObj.value = data
  }

  const FIFTH_DAY = 6 * 24 * 60 * 60 * 1000 // 15天的毫秒数
  const rangeValue = ref<any>([dayjs(Date.now() - FIFTH_DAY), dayjs(Date.now())])
  console.log('rangeValue', rangeValue)
  const now = new Date()
  const sevenDaysAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)

  const defaulte: { name: string; value: number }[] = []
  const initDefaultData = (): void => {
    for (let i = 0; i <= 7; i++) {
      const date = new Date(sevenDaysAgo.getTime() + i * 24 * 60 * 60 * 1000)
      defaulte.push({
        name: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate(),
        value: 0
      })
    }
    console.log('===========', defaulte)
  }

  // 初始化
  const domInit = (): void => {
    formatPieDom = document.getElementById('formatPie')
    formatPieChart = echarts.init(formatPieDom)

    typePieDom = document.getElementById('typePie')
    typePieChart = echarts.init(typePieDom)

    sizePieDom = document.getElementById('sizePie')
    sizePieChart = echarts.init(sizePieDom)

    fileTrendCloudDom = document.getElementById('fileTrendCloud')
    fileTrendCloudChart = echarts.init(fileTrendCloudDom)
  }
  const initEcharts = async () => {
    formatPieInit()
    typePieInit()
    sizePieInit()
    fileTrendCloudInit()
  }
  onMounted(async () => {
    await getBoardInfo()
    initDefaultData()
    setTimeout(() => {
      initEcharts()
    }, 100)
    await domInit()
  })

  // 销毁dom
  onUnmounted(() => {
    if (formatPieChart) formatPieChart.dispose()
    if (typePieChart) typePieChart.dispose()
    if (sizePieChart) sizePieChart.dispose()
    if (fileTrendCloudChart) fileTrendCloudChart.dispose()
  })

  // 更新dom
  onUpdated(async () => {
    formatPieInit()
    typePieInit()
    sizePieInit()
    fileTrendCloudInit()
  })
</script>

<style lang="less" scoped>
  .data-board {
    display: flex;
    margin-top: 16px;

    .dataset-part {
      display: flex;
      margin-bottom: 19.5px;

      .left-box {
        display: flex;

        .dataset-num-part {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          padding: 20px 32px;
          margin-right: 20px;
          width: 302px;
          height: 444px;
          background: #fff;
          border: 1px solid @border1;
          border-radius: 10px;
          flex-direction: column;

          .item {
            width: 100%;
            height: 192px;
            font-family: 'Noto Sans SC';

            .title {
              padding-bottom: 12px;
              width: 100%;
              font-size: 16px;
              color: @text01;
              line-height: 24px;
              border-bottom: 1px solid rgba(232, 232, 235, 1);
            }

            .num-box {
              display: flex;
              justify-content: center;

              .num {
                display: flex;
                justify-content: center;
                align-items: center;
                overflow: hidden;
                margin-top: 20px;
                width: 128px;
                height: 127px;
                font-size: 30px;
                text-align: center;
                border-radius: 70px;
                word-wrap: break-word;
                word-break: break-all;
              }

              .blue {
                background: linear-gradient(180deg, rgba(245, 249, 254, 0) 0%, #f5f9fe 100%);
                border: 2px solid rgba(183, 208, 248, 0.1);
              }

              .or {
                background: linear-gradient(180deg, rgba(252, 223, 176, 0) 0%, rgba(252, 223, 176, 0.2) 100%);
                border: 2px solid rgba(245, 151, 0, 0.04);
              }
            }
          }
        }
      }

      .dataset-detail-part {
        // width: 100%;

        .top-box {
          display: flex;
          padding: 14px 32px 20px;
          width: 838px;
          height: 444px;
          background: #fff;
          border: 1px solid @border1;
          border-radius: 10px;

          .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 12px;
            height: 40px;
            font-size: 16px;
            font-weight: 700;
          }

          .dataset-size,
          .file-size {
            width: 383px;
            height: 100%;

            .data-set-content,
            .file-size-content {
              padding: 4px 8px;

              .item {
                .elliptical-1();

                margin-bottom: 4px;
                height: 32px;
                line-height: 32px;
                color: @text02;
              }

              .index {
                display: inline-block;
                width: 15px;
                font-size: 12px;
                color: @text04;
                font-weight: 700;
              }

              .name {
                color: @text02;
              }
            }
          }

          .file-size {
            .title {
              background: linear-gradient(270deg, rgba(245, 151, 0, 0.05) 0%, rgba(245, 151, 0, 0.1) 100%);
            }
          }

          .dataset-size {
            // margin-bottom: 20px;

            .title {
              background: linear-gradient(270deg, rgba(100, 154, 240, 0.05) 0%, rgba(100, 154, 240, 0.1) 100%);
            }
          }
        }
      }
    }

    .file-trend-part {
      padding: 24px 32px;
      width: 1160px;
      height: 236px;
      background: @background1;
      border: 1px solid @border1;
      border-radius: 10px;

      .file-trend-title {
        font-size: 16px;
        color: @text01;
      }

      .file-trend-chart {
        width: 100%;
        height: 100%;
      }
    }
  }

  .piechart-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 32px;
    padding-bottom: 40px;
    margin-left: 20px;
    width: 196px;
    height: 700px;
    background: #fff;
    border: 1px solid @border1;
    border-radius: 10px;

    .file-item {
      height: 186px;

      .title {
        padding-bottom: 12px;
        margin-bottom: 16px;
        font-size: 16px;
        color: @text01;
        border-bottom: 1px solid rgba(232, 232, 235, 1);
        font-style: normal;
        font-weight: 700;
        line-height: 24px;
      }

      .file-pie {
        width: 134.137px;
        height: 134.137px;
      }
    }
  }
</style>
